﻿<div class="panel panel-default">
    <div class="panel-heading">
        <h2>{{::vm.translate.get('Order Detail')}}: {{vm.order.id}}</h2>
    </div>
    <div class="panel-body">
        <h3>{{::vm.translate.get('Order Information')}}</h3>
        <dl class="dl-horizontal">
            <dt>{{::vm.translate.get('OrderId')}}</dt>
            <dd>{{vm.order.id}}</dd>
            <dt>{{::vm.translate.get('Created On')}}</dt>
            <dd>{{vm.order.createdOn}}</dd>
            <dt>{{::vm.translate.get('Customer')}}</dt>
            <dd>{{vm.order.customerName}}</dd>
            <dt>{{::vm.translate.get('Sub Total')}}</dt>
            <dd>{{vm.order.subTotalString}}</dd>
            <dt>{{::vm.translate.get('Order Status')}}</dt>
            <dd>{{vm.order.orderStatusString}} <button class="btn btn-link" ng-click="vm.isStatusFormOpen = !vm.isStatusFormOpen">{{::vm.translate.get('Change')}}</button>
                <form ng-show="vm.isStatusFormOpen" class="form-inline inline">
                    <div class="form-group">
                        <select class="form-control" ng-model="vm.order.orderStatus" ng-options="s.id as s.name for s in vm.orderStatus"></select>
                    </div>
                    <button type="button" ng-click="vm.changeOrderStatus()" class="btn btn-primary">{{::vm.translate.get('Save')}}</button>
                </form>
             </dd>
        </dl>

        <h3>{{::vm.translate.get('Shipping Information')}}</h3>
        <dl class="dl-horizontal">
            <dt>{{::vm.translate.get('Contact name')}}</dt>
            <dd>{{vm.order.shippingAddress.contactName}}</dd>
            <dt>{{::vm.translate.get('Address')}}</dt>
            <dd>{{vm.order.shippingAddress.addressLine1}}</dd>
            <dt>{{::vm.translate.get('District')}}</dt>
            <dd>{{vm.order.shippingAddress.districtName}}</dd>
            <dt>{{::vm.translate.get('State or Province')}}</dt>
            <dd>{{vm.order.shippingAddress.stateOrProvinceName}}</dd>
            <dt>{{::vm.translate.get('Phone')}}</dt>
            <dd>{{vm.order.shippingAddress.phone}}</dd>
        </dl>

        <h3>{{::vm.translate.get('Product Information')}}</h3>
        <table class="table table-striped order-item-list">
            <thead>
            <tr>
                <th colspan="2">{{::vm.translate.get('Product')}}</th>
                <th>{{::vm.translate.get('Price')}}</th>
                <th>{{::vm.translate.get('Quantity')}}</th>
                <th>{{::vm.translate.get('Total')}}</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in vm.order.orderItems">
                <td class="product-image"><img ng-src="{{item.productImage}}"/></td>
                <td>
                    <h4>{{item.productName}}</h4>
                    <ul class="list-unstyled">
                        <li ng-repeat="opt in item.variationOptions">
                            <span>{{opt.optionName}}:</span> {{opt.value}}
                        </li>
                    </ul>
                </td>
                <td>{{item.productPriceString}}</td>
                <td>
                    <span>{{item.quantity}}</span>
                </td>
                <td>{{item.totalString}}</td>
            </tr>
            </tbody>
        </table>

        <div>
            <button ui-sref="order" class="btn btn-default">{{::vm.translate.get('Back')}}</button>
        </div>
    </div>
</div>